@import "./fontsize.scss";
@import "./func.scss";
@import "./color.scss";

//begin =============font-size
.fontsize {
    font-size: $fontsize;
}
.big {
    font-size: $big;
}
.sub-big {
    font-size: $sub-big;
}

.small {
    font-size: $small;
}

.sub-small {
    font-size: $sub-small;
    line-height: $sub-small+4px;
}

.super-small {
    white-space: nowrap;
    font-size: 12px;
    -webkit-transform-origin-x: 0; //缩小后文字居左
    -webkit-transform: scale(0.80); //关键
}



//flex

.flex-end-c {
    display: flex;
    align-items: flex-end;
}

//shadow
.shadow {
    @include shadow() ;
}

.shadow-strong {
    @include shadow-strong() ;
}

.up-shadow {
    @include up-shadow() ;
}

//text
.line-through {
    text-decoration: line-through;
}


//color
.grey {
    color: $descColor;
}


//padding margin
@mixin padding($List:15) {
    @for $i from 1 through $List {
        .padding-left-#{$i*10} {
            padding-left: (10px * $i);
        }
        .padding-#{$i*10} {
            padding: (10px * $i);
        }
        .padding-right-#{$i*10} {
            padding-right: (10px * $i);
        }
        .padding-left-right-#{$i*10} {
            padding-left: (10px * $i);
            padding-right: (10px * $i);
        }
        .padding-top-bottom-#{$i*10} {
            padding-top: (10px * $i);
            padding-bottom: (10px * $i);
        }
        .padding-top-#{$i*10} {
            padding-top: (10px * $i);
        }
        .padding-bottom-#{$i*10} {
            padding-bottom: (10px * $i);
        }

        .margin-left-#{$i*10} {
            margin-left: (10px * $i);
        }
        .margin-#{$i*10} {
            margin: (10px * $i);
        }
        .margin-right-#{$i*10} {
            margin-right: (10px * $i);
        }
        .margin-left-right-#{$i*10} {
            margin-left: (10px * $i);
            margin-right: (10px * $i);
        }
        .margin-top-#{$i*10} {
            margin-top: (10px * $i);
        }

        .margin-top-bottom-#{$i*10} {
            margin-top: (10px * $i);
            margin-bottom: (10px * $i);
        }
        .margin-bottom-#{$i*10} {
            margin-bottom: (10px * $i);
        }
        .border-radius-#{$i*10} {
            border-radius: (10px * $i);
        }
        .height-#{$i*10} {
            height: (10px * $i);
        }

    }
}
//padding margin  5的倍数的
@mixin padding-5n($List:15) {
    @for $i from 1 through $List {
        .padding-left-#{$i*5} {
            padding-left: (5px * $i);
        }
        .padding-#{$i*5} {
            padding: (5px * $i);
        }
        .padding-right-#{$i*5} {
            padding-right: (5px * $i);
        }
        .padding-left-right-#{$i*5} {
            padding-left: (5px * $i);
            padding-right: (5px * $i);
        }
        .padding-top-bottom-#{$i*5} {
            padding-top: (5px * $i);
            padding-bottom: (5px * $i);
        }
        .padding-top-#{$i*5} {
            padding-top: (5px * $i);
        }
        .padding-bottom-#{$i*5} {
            padding-bottom: (5px * $i);
        }

        .margin-left-#{$i*5} {
            margin-left: (5px * $i);
        }
        .margin-#{$i*5} {
            margin: (5px * $i);
        }
        .margin-right-#{$i*5} {
            margin-right: (5px * $i);
        }
        .margin-left-right-#{$i*5} {
            margin-left: (5px * $i);
            margin-right: (5px * $i);
        }
        .margin-top-#{$i*5} {
            margin-top: (5px * $i);
        }

        .margin-top-bottom-#{$i*5} {
            margin-top: (5px * $i);
            margin-bottom: (5px * $i);
        }
        .margin-bottom-#{$i*5} {
            margin-bottom: (5px * $i);
        }


        .border-radius-#{$i*5} {
            border-radius: (5px * $i);
        }
        .height-#{$i*5} {
            height: (5px * $i);
        }

    }
}
@include padding();
@include padding-5n();




.margin-top-5 {
    margin-top: 5px;
}
.padding-top-bottom-5 {
    padding-bottom: 5px;
    padding-top: 5px;
}

.primary-color {
    color: $primaryColor;
}

.strong {
    font-weight: 500;
}

.flex-c {
    display: flex;
    justify-content: center;
}

.flex-r {
    display: flex;
    justify-content: center;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.border-bottom {
    position: relative;
    &:after {
        position: absolute;
        content: "";
        bottom: 0px;
        width: calc(100%);
        left: 0px;
        height: 0.13vw;
        background: $divideColor;
    }
}

.border-bottom-space {
    position: relative;

    &:after {
        position: absolute;
        content: "";
        bottom: 0px;
        width: calc(100% - 20px);
        left: 10px;
        height: 0.13vw;
        background: $divideColor;
    }
}

.border-bottom-left {
    position: relative;

    &:after {
        position: absolute;
        content: "";
        bottom: 0px;
        width: calc(100% - 20px);
        left: 20px;
        height: 0.13vw;
        background: $divideColor;
    }
}


.flex-1 {
    flex: 1;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-end-r {
    display: flex;
    justify-content: flex-end;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
}

.flex-c {
    display: flex;
    align-items: center;
}

.flex-c-r {
    display: flex;
    justify-content: center;
}


.center-c {
    display: flex;
    align-items: center;
}

.white {
    color: #fff;
}

.bg-white {
    background: #fff;
}

.bg-primary {
    background: $primaryColor;
}

.font-weight-400 {
    font-weight: 400;
}

.flex-1 {
    flex: 1;
}



.flex-start-c {
    display: flex;
    align-items: flex-start;
}

.padding-top-bottom-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.flex-d-c {
    display: flex;
    flex-direction: column;
}

.text-center {
    text-align: center;
}

.flex-c-c {
    display: flex;
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.bg-grey {
    background: $bgColor;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-5 {
    border-radius: 5px;
}

.ligher {
    font-weight: 300;
}


.super-big{
    font-size: $super-big;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.padding-left-right-5 {
    padding-right: 5px;
    padding-left: 5px;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}

.padding-left-5 {
    padding-left: 5px;
}

.padding-top-bottom-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padding-right-5 {
    padding-right: 5px;
}

.up-border {
    border-top: 1px solid $divideColor;
}

.up-border-space {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        height: 0.13vw;
        width: calc(100% - 20px);
        background: $divideColor;
    }
}

.up-border-left {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 15px;
        height: 0.13vw;
        width: calc(100% - 15px);
        background: $divideColor;
    }
}

.button {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #fff;
    font-size: $sub-small;

    &.red {
        background: $primaryColor;
        color: #fff;
    }

    &.button-line {
        color: $primaryColor;
        border: 1px solid $primaryColor;
        background: #fff;
    }

    &.button-radius {
        border-radius: 10px;
    }

    &.button-radius-20 {
        border-radius: 20px;
    }
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.padding-2 {
    padding: 2px;
}
.padding-5 {
    padding: 5px;
}
.padding-top-5 {
    padding-top: 5px;
}

